<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>当前的n：<span v-text="n"></span></h1>
    <h1>放大10倍后的n：<span v-big="n"></span></h1>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            n: 1
        },
        directives: {
            big: {
                bind() {
                    // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
                },
                inserted() {
                    //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中
                },
                update() {
                    //所在组件的 VNode 更新时调用，**但是可能发生在其子 VNode 更新之前**。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
                },
                componentUpdated() {
                     //指令所在组件的 VNode **及其子 VNode** 全部更新后调用。
                },
                unbind() {
                    //只调用一次，指令与元素解绑时调用
                }
            }
        }
    })
</script>
</body>
</html>

